<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset='utf-8'>
  <link href="../css/zui.min.css" rel="stylesheet">
  <link href="../css/example.css" rel="stylesheet">

  <link rel="stylesheet/less" type="text/css" href="../src/less/zui.less" />
  <script type="text/javascript"> less = { env: "development", dumpLineNumbers:'mediaquery' }; </script>
  <script src="../assets/js/less.js"></script>
  <script src="../../assets/jquery.js"></script>
  <script src="../../dist/js/zui.min.js"></script>






  <script src="../assets/js/example.js"></script>
</head>
<body>
  <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">ZUI</a>
    </div>
    <div class="collapse navbar-collapse" id="navbar">
      <ul class="nav navbar-nav">
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown"><span id="navbarCurrent">examples</span> <b class="caret"></b></a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="alerts.html">alerts</a></li>
            <li><a href="article.html">article</a></li>
            <li><a href="breadcrumb.html">breadcrumb</a></li>
            <li><a href="button-groups.html">button-groups</a></li>
            <li><a href="buttons.html">buttons</a></li>
            <li><a href="cards.html">cards</a></li>
            <li><a href="carousel.html">carousel</a></li>
            <li><a href="chosen.html">chosen</a></li>
            <li><a href="collapse.html">collapse</a></li>
            <li><a href="colorset.html">colorset</a></li>
            <li><a href="comment.html">comment</a></li>
            <li><a href="dropdowns.html">dropdowns</a></li>
            <li><a href="forms.html">forms</a></li>
            <li><a href="grid.html">grid</a></li>
            <li><a href="icons.html">icons</a></li>
            <li><a href="input-groups.html">input-groups</a></li>
            <li><a href="kindeditor.html">kindeditor</a></li>
            <li><a href="labels.html">labels</a></li>
            <li><a href="lightbox.html">Lightbox</a></li>
            <li><a href="list-group.html">list-group</a></li>
            <li><a href="list.html">list</a></li>
            <li><a href="modals.html">modals</a></li>
            <li><a href="navbars.html">navbars</a></li>
            <li><a href="navs.html">navs</a></li>
            <li><a href="pager.html">pager</a></li>
            <li><a href="panels.html">panels</a></li>
            <li><a href="popovers.html">popovers</a></li>
            <li><a href="progress.html">progress</a></li>
            <li><a href="tables.html">tables</a></li>
            <li><a href="tabs.html">tabs</a></li>
            <li><a href="textbox.html">textbox</a></li>
            <li><a href="tooltip.html">tooltip</a></li>
            <li><a href="type.html">type</a></li>
          </ul>
        </li>
        <li id="navbarNext"><a href="###">NEXT <i class="icon-angle-right icon-large"></i></a></li>
      </ul>
    </div>
  </nav>
<article>
  <section id='collapse' class="page-section">
    <h1>折叠</h1>
    <p>需要<a target='_blank' href='http://v3.bootcss.com/javascript/#transitions'>transition.js</a>支持。</p>
    <p><code>.collapse</code>隐藏条目, <code>.collapse.in</code>显示条目。</p>
    <p>调用方式一：仅仅通过向页面元素添加<code>data-toggle="collapse"</code> 和<code>data-target</code>就可以为其赋予控制可折叠页面元素的能力。
      <code>data-target</code>属性接受一个CSS选择器作为其控制对象。请确保为可折叠页面元素添加<code>.collapse</code>。
      如果你希望可折叠页面元素的默认状态是展开的，请添加<code>.in</code>。
      为了给一组可折叠页面元素添加控制器，添加<code>data-parent="#selector"</code>即可</p>
    <p>调用方式二：手动触发<code>$(".collapse").collapse()</code></p>

    <h3>类型</h3>
    <h4>结合面板</h4>
    <div class="panel-group" id="accordion">
      <div class="panel panel-default">
        <div class="panel-heading">
          <h4 class="panel-title">
            <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">Item 1 </a>
          </h4>
        </div>
        <div id="collapseOne" class="panel-collapse collapse fade">
          <div class="panel-body">The content of Item1.<code>.panel-collapse .collapse .fade</code></div>
        </div>
      </div>
      <div class="panel panel-default">
        <div class="panel-heading">
          <h4 class="panel-title">
            <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">Item 2 </a>
          </h4>
        </div>
        <div id="collapseTwo" class="panel-collapse collapse in">
          <div class="panel-body">
           <p>The content of Item2. <code>.panel-collapse .collapse .in</code>默认显示。</p>
          </div>
        </div>
      </div>
      <div class="panel panel-default">
        <div class="panel-heading">
          <h4 class="panel-title">
            <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">Item 3</a>
          </h4>
        </div>
        <div id="collapseThree" class="panel-collapse collapse">
          <div class="panel-body">The content of item3. <code>.panel-collapse .collapse</code></div>
        </div>
      </div>
    </div>

    <h4>结合按钮</h4>
    <button type="button" class="btn btn-info" data-toggle="collapse" data-target="#collapseButton">hulala</button>
    <div id="collapseButton" class="collapse in">Ho la la hu la la, hu la hu la.</div>

    <h3>变化</h3>
    <h4>方法和事件</h4>
    <table class="table table-bordered table-striped">
      <thead>
       <tr>
         <th style="width: 80px;">方法</th>
         <th>例子</th>
         <th>描述</th>
       </tr>
      </thead>
      <tbody>
       <tr>
         <td>.collapse(options)</td>
         <td><code>$('#myCollapse').collapse({ toggle: false })</code></td>
         <td>赋予页面元素可折叠功能。接受一个可选的object作为参数。</td>
       </tr>
       <tr>
         <td>.collapse('toggle')</td>
         <td><code>$('#myCollapse').collapse('toggle')</code></td>
         <td>展示或隐藏一个可折叠的页面元素。</td>
       </tr>
       <tr>
         <td>.collapse('show')</td>
         <td><code>$('#myCollapse').collapse('show')</code></td>
         <td>展示一个可折叠页面元素。</td>
       </tr>
       <tr>
         <td>.collapse('hide')</td>
         <td><code>$('#myCollapse').collapse('hide')</code></td>
         <td>隐藏一个可折叠页面元素。</td>
       </tr>
      </tbody>
    </table>
    <table class="table table-bordered table-striped">
      <thead>
       <tr>
         <th style="width: 80px;">事件</th>
         <th>使用</th>
         <th>描述</th>
       </tr>
      </thead>
      <tbody>
       <tr>
         <td>show.bs.collapse</td>
         <td><code>$('#myCollapse').on('show.bs.collapse', function () { // do something… })</code></td>
         <td>当<code>show</code>方法被调用时，此事件将被立即触发。</td>
       </tr>
       <tr>
         <td>shown.bs.collapse</td>
         <td><code>$('#myCollapse').on('shown.bs.collapse', function () { // do something… })</code></td>
         <td>当可折叠页面元素显示出来之后（同时CSS过渡效果也已执行完毕），此事件被触发。</td>
       </tr>
       <tr>
         <td>hide.bs.collapse</td>
         <td><code>$('#myCollapse').on('hide.bs.collapse', function () { // do something… })</code></td>
         <td>当<code>hide</code>方法被调用时，此事件将被立即触发。</td>
       </tr>
       <tr>
         <td>hidden.bs.collapse</td>
         <td><code>$('#myCollapse').on('hidden.bs.collapse', function () { // do something… })</code></td>
         <td>当可折叠页面元素隐藏之后（同时CSS过渡效果也已执行完毕），此事件被触发。</td>
       </tr>
      </tbody>
    </table>

  </section>
</article>
</body>
</html>
